<html xmlns="http://www.w3.org/1999/xhtml" xmlns:c="http://java.sun.com/jstl/core"
      xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:t="http://myfaces.apache.org/tomahawk">

    <f:view>
        <f:loadBundle var="text" basename="#{fileList.bundleName}"/>
        <head>
            <title>#{text['fileList.title']}</title>
            <meta name="heading" content="#{text['fileList.heading']}"/>
            <meta name="menu" content="DocumentManagement"/>
        </head>

        <div id="search">
            <h:form id="searchForm">
                <h:inputText id="q" size="20" value="#{fileList.query}"/>
                <h:commandButton value="#{text['button.search']}" action="#{fileList.search}"/>
            </h:form>
        </div>

        <h:form id="uploadFile">

            <h:commandButton value="#{text['button.upload']}" action="selectFile" id="add" styleClass="button">
            </h:commandButton>
            <h:commandButton value="#{text['button.done']}" action="mainMenu" id="cancel"
                             immediate="true" styleClass="button" style="margin-left: 5px"/>

            <!-- Error from this table is caused by http://issues.apache.org/jira/browse/TOMAHAWK-466 -->
            <t:dataTable id="documents" var="document" style="margin-top: 10px"
                         value="#{fileList.documents}" rows="25" sortColumn="#{fileList.sortColumn}"
                         sortAscending="#{fileList.ascending}" styleClass="scrollerTable table"
                         headerClass="standardTable_Header" rowClasses="standardTable_Row1,standardTable_Row2"
                         columnClasses="standardTable_Column,standardTable_Column,standardTable_Column,standardTable_Column,standardTable_ColumnCentered">
                <t:column width="20%">
                    <f:facet name="header">
                        <t:commandSortHeader columnName="name" arrow="true">
                            <h:outputText value="#{text['document.name']}" />
                        </t:commandSortHeader>
                    </f:facet>
                     <h:outputText value="#{document.name}" />
                </t:column>
                <t:column width="20%">
                    <f:facet name="header">
                        <t:commandSortHeader columnName="contentType" arrow="true">
                            <h:outputText value="#{text['document.contentType']}" />
                        </t:commandSortHeader>
                    </f:facet>
                    <h:outputText value="#{document.contentType}" />
                </t:column>
                <t:column width="20%">
                    <f:facet name="header">
                        <t:commandSortHeader columnName="fileSize" arrow="true">
                            <h:outputText value="#{text['document.fileSize']}" />
                        </t:commandSortHeader>
                    </f:facet>
                    <h:outputText value="#{document.fileSize}" />
                </t:column>
                <t:column width="15%">
                    <f:facet name="header">
                        <t:commandSortHeader columnName="date_created" arrow="true">
                            <h:outputText value="#{text['document.dateCreated']}" />
                        </t:commandSortHeader>
                    </f:facet>
                    <h:outputText value="#{document.dateCreated}" />
                </t:column>
                <t:column width="5%">
                    <f:facet name="header">
                            <h:outputText value="#{text['button.download']}" />
                    </f:facet>
                    <h:commandButton type="button" value="#{text['button.download']}" onclick="window.open('#{document.filePath}');" id="downloadDoc" styleClass="button" style="margin-left: 5px"/>
                </t:column>
                <t:column width="5%">
                    <f:facet name="header">
                            <h:outputText value="#{text['button.download']}" />
                    </f:facet>
                    <h:commandButton action="#{fileUpload.delete}" value="#{text['button.delete']}" onclick="return confirm('#{text['confirm.deleteFile']}');" id="deleteDoc" styleClass="button" style="margin-left: 5px">
                        <f:param name="fileToDelete" value="#{document.name}"/>
                    </h:commandButton>
                </t:column>
            </t:dataTable>

            <ui:include src="/common/tableFooter.xhtml">
                <ui:param name="tableName" value="documents"/>
            </ui:include>

            <script type="text/javascript">
                highlightTableRows("uploadFile:documents"); // doesn't currently work to allow clicking row
            </script>

        </h:form>
    </f:view>
</html>